<!--
  订单表列表管理页面
  User: YanZengBao
  Date: 2020-02-19
-->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" lang="zh">
<head>
    <meta charset="utf-8"/>
    <title>订单表管理</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="订单表后台服务中心"/>
    <meta content="" name="GaoXiang"/>
    <th:block th:replace="body/head-page :: dva_head_page"/>
</head>

<body class="page-content-white  fade-in-up">

<!-- BEGIN CONTAINER -->
<div class="page-container">


    <!-- BEGIN PAGE TOOLS-->
    <!--查询条件示例 使用时取消hide样式-->
    <div class="portlet light ">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-paper-plane font-green-haze"></i>
                <span class="caption-subject bold font-green-haze uppercase">搜索</span>
                <span class="caption-helper">点击右侧搜索按钮开始检索</span>
            </div>
            <div class="tools">
                <a href="javascript:void(0);" class="collapse" data-original-title="收起" title="收起"></a>
                <a href="javascript:void(0);" class="fullscreen" data-original-title="全屏" title="全屏"></a>
            </div>
        </div>
        <div class="portlet-body">
            <div class="form-inline" role="form" id="table-param">

                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control" name="parkName" value="" placeholder="车场名称">
                    <div class="form-control-focus"></div>
                </div>

                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control" name="orderCode" value="" placeholder="订单编号">
                    <div class="form-control-focus"></div>
                </div>

                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control" name="plateNo" value="" placeholder="车牌号码">
                    <div class="form-control-focus"></div>
                </div>

                <div class="form-group form-md-line-input has-success">
                    <select class="form-control" name="payType">
                        <option value="">请选择支付方式</option>
                        <option value="0">未支付</option>
                        <option value="1">支付宝</option>
                        <option value="2">微信</option>
                        <option value="3">余额</option>
                        <option value="4">现金</option>
                    </select>
                    <div class="form-control-focus"></div>
                </div>

                <div class="form-group form-md-line-input has-success">
                    <select class="form-control" name="orderStatus">
                        <option value="">请选择订单状态</option>
                        <option value="0">未支付</option>
                        <option value="1">已支付</option>
                        <option value="2">已失效</option>
                    </select>
                    <div class="form-control-focus"></div>
                </div>

                <!--按时间段查询-->
                <!--<div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control bs-date datetimePicker" autocomplete="off" name="beginTime" value="" placeholder="开始时间">
                    <div class="form-control-focus"></div>
                </div>

                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control bs-date datetimePicker" autocomplete="off" name="endTime" value="" placeholder="结束时间">
                    <div class="form-control-focus"></div>
                </div>

                &lt;!&ndash;查询输入时间当天的数据&ndash;&gt;
                <div class="form-group form-md-line-input has-success">
                    <input type="text" class="form-control bs-date datetimePicker" autocomplete="off" name="nowDate" value="" placeholder="选择查询时间">
                    <div class="form-control-focus"></div>
                </div>-->

                <button class="btn btn-success btn-tools-search"><i class="icon-magnifier"></i> 搜索</button>
                <button class="btn btn-danger btn-tools-reset" data-url-param="&current=1&size=10"><i
                        class="icon-reload"></i> 重置
                </button>
            </div>
        </div>
    </div>
    <!-- END PAGE TOOLS-->

    <!-- BEGIN PAGE TABLE-->
    <div class="portlet light">
        <div class="portlet-title">
            <div class="caption">
                <i class="icon-speech  font-blue-hoki"></i>
                <span class="caption-subject font-blue-hoki">订单表数据表</span>
                <span class="caption-helper">
                    当前查询条件下有：<span class="show-page-total">0</span> 条数据，
                    总计：<span class="show-page-count">0</span> 页，
                    当前显示第：<span class="show-page-current">0</span> 页，
                    首行为第：<span class="show-page-begin">0</span> 条数据。
                    页面存在缓存数据，请您在操作后等待五分钟再刷新列表，或者点击右侧刷新按钮。
                </span>
            </div>

            <div class="tools">
                <a href="" class="collapse" data-original-title="" title=""> </a>
                <a href="" class="reload btn-tools-refresh" data-cache-name="dvaCache5M" data-original-title=""
                   title=""> </a>
                <a href="" class="fullscreen" data-original-title="" title=""> </a>
            </div>

        </div>
        <div class="table-toolbar">
            <div class="row">
                <div class="col-md-6">
                    <!-- <div shiro:hasPermission="'order:add'" class="btn-group">
                         <a href="javascript:void(0);" class="btn green btn-module-add">
                             订单表添加 <i class="fa fa-plus"></i>
                         </a>
                     </div>-->
                </div>
                <div class="col-md-6">
                    <div shiro:hasPermission="'order:delete'" class="btn-group pull-right">
                        <button class="btn btn-danger btn-module-delete-all"> 批量删除 <i class="fa fa-times"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="portlet-body table-responsive">
            <div class="table-scrollable">
                <table th:data-page-size="${page['size']}"
                       th:data-current-page="${page['current']}"
                       th:data-total-counts="${page['total']}"
                       th:data-page-counts="${page.getPages()}"
                       data-visible-pages="10"
                       class="table table-bordered table-hover"
                       id="table">
                    <thead>
                    <tr>
                        <th class="table-checkbox">
                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                <input type="checkbox" class="checkbox-all" title="全选"><span></span>
                            </label>
                        </th>
                        <th>订单编号</th>
                        <th>车场名称</th>
                        <th>车牌号码</th>
                        <th>进场记录ID</th>
                        <th>离场记录ID</th>
                        <th>停车时长</th>
                        <th>订单总价</th>
                        <th>实际金额</th>
                        <th>备注信息</th>
                        <th>支付方式</th>
                        <th>订单状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="data,iterStat : ${page['records']}">
                        <td class="center">
                            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                                <input type="checkbox" class="checkbox-child"
                                       title="选择此条数据" th:value="${data['id']}"><span></span>
                            </label>
                        </td>
                        <!--<td th:title="${data['id']}" th:text="${#strings.abbreviate(data['id'],32)}"></td>-->
                        <td th:title="${data['orderCode']}" th:text="${#strings.abbreviate(data['orderCode'],32)}"></td>
                        <td th:title="${data['parkName']}" th:text="${#strings.abbreviate(data['parkName'],32)}"></td>
                        <td th:title="${data['plateNo']}" th:text="${#strings.abbreviate(data['plateNo'],32)}"></td>
                        <td th:title="${data['enterRecordId']}"
                            th:text="${#strings.abbreviate(data['enterRecordId'],32)}"></td>
                        <td th:title="${data['leaveRecordId']}"
                            th:text="${#strings.abbreviate(data['leaveRecordId'],32)}"></td>
                        <td th:title="${data['stopTime']}" th:text="${data['stopTime']}"></td>
                        <td th:title="${data['totalMoney']}" th:text="${data['totalMoney']}"></td>
                        <td th:title="${data['reallyMoney']}" th:text="${data['reallyMoney']}"></td>
                        <td th:title="${data['discountIntro']}"
                            th:text="${#strings.abbreviate(data['discountIntro'],32)}"></td>

                        <td th:title="${data['payType']}" th:if="${data['payType'] == 0}">未支付</td>
                        <td th:title="${data['payType']}" th:if="${data['payType'] == 1}">支付宝</td>
                        <td th:title="${data['payType']}" th:if="${data['payType'] == 2}">微信</td>
                        <td th:title="${data['payType']}" th:if="${data['payType'] == 3}">余额</td>
                        <td th:title="${data['payType']}" th:if="${data['payType'] == 4}">现金</td>
                        <td th:title="${data['payType']}"
                            th:unless="${data['payType'] == 4 || data['payType'] == 3 || data['payType'] == 2 || data['payType'] == 1 ||data['payType'] == 0}"></td>

                        <td th:title="${data['orderStatus']}" th:if="${data['orderStatus'] == 0}">未支付</td>
                        <td th:title="${data['orderStatus']}" th:if="${data['orderStatus'] == 1}">已支付</td>
                        <td th:title="${data['orderStatus']}" th:if="${data['orderStatus'] == 2}">已失效</td>
                        <td th:title="${data['orderStatus']}"
                            th:unless="${data['orderStatus'] == 2 || data['orderStatus'] == 1 ||data['orderStatus'] == 0}"></td>

                        <td th:title="${#dates.format(data['createTime'],'yyyy-MM-dd HH:mm:ss')}"
                            th:text="${#dates.format(data['createTime'],'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td>
                            <div class="btn-group btn-group-xs btn-group-solid">
                                <!--<button shiro:hasPermission="'order:edit'" th:data-id="${data['id']}" class="btn btn-success btn-module-edit"> 查看\编辑 </button>-->
                                <button shiro:hasPermission="'order:delete'" th:data-id="${data['id']}"
                                        class="btn btn-danger btn-module-delete"> 删除
                                </button>
                                <button th:if="${data['innerImg'] != null && data['innerImg'] != ''}"  th:data-url="${data['innerImg']}"
                                        class="btn btn-success" onclick="showEnterImage(this)"> 入场图片
                                </button>
                                <button th:if="${data['enterImg'] != null && data['enterImg'] != ''}" th:data-url="${data['enterImg']}"
                                        class="btn btn-success" onclick="showEnterImage(this)"> 出场图片
                                </button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <ul class="pagination">
                <li>
                    <select class="form-control" id="pageSize">
                        <optgroup label="每页显示行数"></optgroup>
                        <option th:attr="selected=${page['size']==3?true:false}" value="3">3</option>
                        <option th:attr="selected=${page['size']==5?true:false}" value="5">5</option>
                        <option th:attr="selected=${page['size']==10?true:false}" value="10">10</option>
                        <option th:attr="selected=${page['size']==20?true:false}" value="20">20</option>
                        <option th:attr="selected=${page['size']==50?true:false}" value="50">50</option>
                        <option th:attr="selected=${page['size']>50?true:false}"
                                th:value="${page['size']}" th:text="'自定义：'+${page['size']}">自定义
                        </option>
                    </select>
                </li>
            </ul>
            <ul class="pagination" id="pagination"></ul>
        </div>
    </div>
    <!-- END PAGE TABLE-->
</div>
<!-- END CONTAINER -->


<th:block th:replace="body/javascript-page :: javascript_page"/>
<script>

    $(document).ready(function () {

        //初始化页面
        initList({
            table: "table",               //表格ID
            url: "/order/page",           //表格分页url
            ajax: true                    //为true时伪静态刷新指定ID的table
        });

    });


    var date = new Date();
    $(".datetimePicker").datetimepicker({
        format: 'yyyy-mm-dd',
        language:"zh-CN",
        todayHighlight:true,
        autoclose: true,
        // startDate: date,
        minView:2,
        todayBtn : true,
    });

    /**
     * 添加模块
     */
    function addModule() {
        tools.loadPage("/order/add", null, function (html) {
            window.layer_addModule = layer.open({
                id: "addModule",
                type: 1,
                title: "订单表添加",
                /* area:['900px','600px'],*/
                area: '900px',
                content: html,
                anim: 1,
                shadeClose: false,
                cancel: function () {
                }
            });
        });
    }

    /**
     * 编辑模块
     */
    function editModule(id) {
        tools.loadPage("/order/edit", {"id": id}, function (html) {
            window.layer_editModule = layer.open({
                id: "editModule",
                type: 1,
                title: "订单表编辑",
                /* area:['900px','600px'],*/
                area: '900px',
                content: html,
                anim: 1,
                shadeClose: false,
                cancel: function () {
                }
            });
        });
    }

    /**
     * 删除单个
     * @param id 要删除的id
     */
    function deleteById(id) {
        layer.confirm("确定删除么？", function () {
            tools.post("/order/delete", {"id": id}, function (data) {
                if (data.success) {
                    layer.msg('删除成功！', {icon: 1, time: 1000}, function () {
                        //跳转到第一页
                        toPage(1);
                    });
                } else {
                    tools.errorTip(data);
                }
            });
        });
    }


    /**
     * 批量删除
     */
    function deleteByIds() {
        let ids = getIds($('#table').find(".checkbox-child:checked"));
        if (ids.length === 0) {
            layer.msg("请先选择要删除的条目！", {icon: 2, time: 1000});
            return;
        }
        layer.confirm("确定删除选中信息么？", function () {
            tools.post("/order/deleteByIds", {"ids": ids.join(",")}, function (data) {
                if (data.success) {
                    layer.msg('批量删除成功！', {icon: 1, time: 1000}, function () {
                        //跳转到第一页
                        toPage(1);
                    });
                } else {
                    tools.errorTip(data);
                }
            });
        });
    }



    function showEnterImage(obj){
        let rurl = $(obj).data("url");
        let img = new Image();
        img.src ="/image/down?src="+rurl;
        img.onload = function(){
            var h,w,iw = img.width,ih = img.height;
            if(iw > ih) {
                w = '700px';
                h = (ih * (700/iw)) + 'px';
                img.style.width = '100%';
            } else {
                h = '500px';
                w = (iw * (500/ih)) + 'px';
                img.style.height = '100%';
            }
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                anim:1,
                area:[w,h],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: img.outerHTML
            });
        };
        img.onerror = function(){
            layer.msg("未查找到图片", {icon: 2,time:1000});
        };
    }

</script>
</body>
</html>